<template>
  <div class="index-box" ref="index">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="search" ref="search">
          <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent
            class="demo-form-inline" id="searchBox">
            <el-form-item prop="applyId">
                <el-input v-model="searchForm.applyId" clearable placeholder="申请编号"></el-input>
            </el-form-item>
            <el-form-item prop="storeName">
                <el-input v-model="searchForm.storeName" clearable placeholder="商家门店名称"></el-input>
            </el-form-item>
            <el-form-item prop="categoryId">
               <treeselect v-model="searchForm.categoryId" :options="categoryList" :normalizer="normalizer" placeholder="商家类型" />
             </el-form-item>
            <el-form-item prop="employeName">
                <el-input v-model="searchForm.employeName" clearable placeholder="审核人信息"></el-input>
            </el-form-item>

            <el-form-item prop="applyTime">
              <el-date-picker v-model="applyTime" type="daterange" align="right" unlink-panels range-separator="至"
                start-placeholder="申请开始日期" end-placeholder="申请结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item prop="auditTime">
              <el-date-picker v-model="auditTime" type="daterange" align="right" unlink-panels range-separator="至"
                start-placeholder="审核开始日期" end-placeholder="审核结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>

            <el-form-item class="clearfix">
              <el-button type="primary" @click="handleSearch()" icon="el-icon-search">搜索</el-button>
              <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="actionBtn" ref="actionBtn">
         <div class="actionBtnLeft">
           <el-radio-group v-model="searchForm.levelId" size="small" @change="handleSearch">
             <el-radio-button label="">全部</el-radio-button>
             <el-radio-button :label="item.levelId" v-for="item in levelList">{{item.name}}</el-radio-button>
           </el-radio-group>
           <el-radio-group v-model="searchForm.auditStatus" size="small" @change="handleSearch" style="margin:0 10px">
             <el-radio-button label="">全部</el-radio-button>
             <el-radio-button :label="item.dictValue" v-for="item in statusList">{{item.dictLabel}}</el-radio-button>
           </el-radio-group>
           <el-button type="primary" @click="handleAdd()"  size="small" icon="el-icon-plus">添加门店</el-button>
         </div>
          <div class="actionBtnRight">
              <MyRefresh></MyRefresh>
              <MyTableColumnSet :tableColumn.sync="tableColumn" :hideTableColumn.sync="hideTableColumn" :tableColumnType.sync="tableColumnType"></MyTableColumnSet>
          </div>
        </div>

        <div class="table" ref="table">
          <el-table :data="dataList" style="width: 100%;"  border :height="tableHeight" @selection-change="handleSelectionChange" @sort-change="handleTablechangeSort"  stripe v-loading="loading">
            <el-table-column type="selection" width="55" :selectable="selectable"></el-table-column>
            <el-table-column prop="applyCode" label="申请编号" v-if="!hideTableColumn.includes('number')"></el-table-column>
            <el-table-column prop="name" label="商家logo" v-if="!hideTableColumn.includes('img')" width="80">
              <template #default="scope">
                 <el-image :src="scope.row.logo" fit="fill" v-image-preview class="img"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="storeName" label="商家门店名称" v-if="!hideTableColumn.includes('storeName')" align="center"></el-table-column>
            <el-table-column prop="categoryName" label="商家类型" v-if="!hideTableColumn.includes('storeType')" align="center"></el-table-column>
            <el-table-column prop="levelName" label="会员等级" v-if="!hideTableColumn.includes('level')" align="center"></el-table-column>
            <el-table-column prop="promotionType" label="推广位类型" v-if="!hideTableColumn.includes('type')" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.promotionType=='1'?'门店推荐':'banner位推荐'}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="bannerImage" label="Banner链接地址" v-if="!hideTableColumn.includes('link')" align="center" width="300"></el-table-column>
            <el-table-column prop="applyTime" label="申请日期" v-if="!hideTableColumn.includes('applyTime')" align="center">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.applyTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="auditTime" label="审核日期" v-if="!hideTableColumn.includes('auditTime')" sortable align="center">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.auditTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="employeName" label="审核人(工号)" v-if="!hideTableColumn.includes('auditNumber')" sortable align="center"></el-table-column>
            <el-table-column prop="auditRemark" label="审核备注" v-if="!hideTableColumn.includes('auditRemark')" align="center" width="200"></el-table-column>
            <el-table-column prop="auditStatus" label="状态" v-if="!hideTableColumn.includes('status')" align="center">
              <template slot-scope="scope">
                  <el-tag :type="scope.row.auditStatus=='1'?'primary':scope.row.auditStatus=='2'?'success':'warning'" >
                    {{scope.row.auditStatus=='1'?'待审核':scope.row.auditStatus=='2'?'已通过':'驳回'}}
                  </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="操作" width="220" align="center" fixed="right">
              <template #default="scope">
                  <el-button
                    v-if="scope.row.auditStatus=='1'"
                    size="medium"
                    type="text"
                    icon="el-icon-document-checked"
                    @click="handleAudit(scope.row)"
                    v-has="'audit:goodStore:auditOne'"
                  >审核</el-button>
                  <el-button
                    v-if="scope.row.auditStatus=='1'"
                    size="medium"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleEdit(scope.row)"
                    v-has="'audit:goodStore:edit'"
                  >修改</el-button>
                  <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-tickets"
                    @click="handleDetail(scope.row)"
                  >查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page" ref="page">
          <MyPagination
            :total="total"
            :page.sync="searchForm.pageNum"
            :limit.sync="searchForm.pageSize"
            @pagination="dataInfo"
          />
        </div>
      </el-col>
    </el-row>

    <!-- 查看详情	 -->
    <el-dialog title="查看详情" width="600px" :close-on-click-modal="false" v-dialogDrag :visible.sync="detailsVisible" @close="detailsVisible = false">
      <el-form id="userDialog" label-position="right" >
        <el-form-item label="申请编号:" prop="audit" label-width="125px"  style="width:100%" >
            {{statusRow.applyCode}}
        </el-form-item>
        <el-form-item style="width:100%" label="类型:" prop="audit" label-width="125px">
           <el-radio-group v-model="statusRow.promotionType">
             <el-radio :label="1">门店推荐(展位)</el-radio>
             <el-radio :label="2">好店广告位(Banner)</el-radio>
           </el-radio-group>
        </el-form-item>
        <el-form-item label="上传Banner图:" prop="img" label-width="125px" v-if="statusRow.promotionType=='2'">
           <el-image :src="statusRow.bannerImage " fit="fill" v-image-preview style="height:100px"></el-image>
        </el-form-item>
        <el-form-item label="申请时间:" prop="audit" label-width="125px"  style="width:100%" >
            {{ parseTime(statusRow.applyTime) }}
        </el-form-item>
        <el-form-item label="审核人:" prop="audit" label-width="125px"  style="width:100%" >
            {{statusRow.employeName}}
        </el-form-item>
        <el-form-item label="审核时间:" prop="audit" label-width="125px"  style="width:100%" >
           {{ parseTime(statusRow.auditTime) }}
        </el-form-item>
        <el-form-item label="审核备注:" prop="audit" label-width="125px"  style="width:100%" >
            {{statusRow.auditRemark}}
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailsVisible = false" size="small">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 修改好店推广	 -->
    <el-dialog :title="goodStoreTitle" width="600px" :close-on-click-modal="false" v-dialogDrag :visible.sync="editVisible" @close="editVisible = false">
      <el-form  label-position="right" :model="goodStore" :rules="goodStoreRules" ref="goodStore">
        <el-form-item label="申请编号:" prop="audit" label-width="125px"  style="width:100%" v-if="goodStoreTitle=='修改门店推广'">
            {{goodStore.applyCode}}
        </el-form-item>
        <el-form-item label="门店名称:" prop="storeId" label-width="125px"  style="width:100%" v-else>
            <el-select v-model="goodStore.storeId" filterable placeholder="请选择门店名称">
                <el-option
                  v-for="item in storeList"
                  :key="item.storeId"
                  :label="item.name"
                  :value="item.storeId">
                </el-option>
              </el-select>
        </el-form-item>
        <el-form-item style="width:100%" label="类型:" prop="promotionType" label-width="125px">
           <el-radio-group v-model="goodStore.promotionType">
             <el-radio :label="1">门店推荐(展位)</el-radio>
             <el-radio :label="2">好店广告位(Banner)</el-radio>
           </el-radio-group>
        </el-form-item>
        <el-form-item label="上传Banner图:" prop="bannerImage" label-width="125px" v-if="goodStore.promotionType=='2'">
           <MyUpImg :imagePreview='goodStore.bannerImage'  @change="imageChange($event, 'bannerImage')" size="700"></MyUpImg>
            <p style="color:red">图片规格必须为：宽 700px、高230px</p>
            <p style="color:#FF7E00">注：上传Banner图时，一定要按照图片的规格大小和图片展现的方式制作，您可右击下载图片进行参考，上传的图若造成平台负面影响，仟店平台会下架您的商品并追究相关责任。</p>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editPromotionSubmit('goodStore')" size="small" :loading="userLoading">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 好店推广审核	 -->
    <el-dialog title="好店推广审核" width="600px" :close-on-click-modal="false" v-dialogDrag :visible.sync="auditVisible" @close="auditVisible = false">
      <el-form id="userDialog" :model="user" label-position="right" :rules="rules" ref="user">
        <el-form-item label="审核:" prop="status" label-width="125px"  style="width:100%" >
          <el-radio-group v-model="user.status">
            <el-radio  label="1">通过</el-radio>
            <el-radio  label="2">不通过</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="备注:" prop="remark" label-width="125px" >
          <el-input v-model="user.remark" type="textarea" autocomplete="off" :rows="4" placeholder="请填写审核备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="auditVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="promotionAuditSubmit('user')" size="small" :loading="userLoading">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import common from '@/api/api';
  import {
    storePromotionList,storePromotionAdd,storePromotionDelete,storePromotionRead,storePromotionAudit,storePromotionUpdate,storePromotionSotreList
  } from '@/api/getData'
  import option from '../../common/option.js';
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
    components: {
    	Treeselect
    },
    data() {
      return {
        sta:true,
        loading: false,
        userLoading: false,
        userVisible:false,
        categoryList:[],
         applyTime:[],
         auditTime:[],
         searchForm: {
           applyId:'',
           storeName:'',
           employeName:'',
           categoryId:undefined,
           levelId:'',
           auditStatus:'',
           pageNum:1,
           pageSize:20
         },
        tableColumn:[{/*自定义表格列*/
            name:'申请编号',
            value:'number'
        },{
            name:'商家logo',
            value:'img'
        },{
            name:'商家门店名称',
            value:'storeName'
        },{
            name:'商家类型',
            value:'stortType'
        },{
            name:'会员等级',
            value:'level'
        },{
            name:'推广位类型',
            value:'type'
        },{
            name:'Banner链接地址',
            value:'link'
        },{
            name:'申请日期',
            value:'applyTime'
        },{
            name:'审核日期',
            value:'auditTime'
        },{
            name:'审核人(工号)',
            value:'auditNumber'
        },{
            name:'审核备注',
            value:'auditRemark'
        },{
            name:'状态',
            value:'status'
        }],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
        tableHeight:0,//table 高度
        statusRow:{},
        dataList:[],
        total: 0,
        multipleSelection: '',
        dialogTitle: '',

        detailsVisible:false,
        editVisible:false,
        userList:[],
        auditVisible:false,

        goodStoreTitle:'修改好店推广',
        goodStore: {
          applyCode: '',
          applyId: '',
          storeId:'',
          promotionType:'',
          bannerImage:''
        },
        goodStoreRules: {
          storeId: [{required: true, message: '请选择门店名称',trigger: 'blur'}],
          promotionType: [{required: true, message: '请选择类型',trigger: 'blur'}],
          bannerImage: [{required: true, message: '请上传Banner图',trigger: 'blur'}],
        },
        user: {
          applyId : '',
          remark:'',
          status :''
        },
        rules: {
          status: [{required: true, message: '请选择审核状态',trigger: 'blur'}]
        },

        levelList:[],
        statusList:[],
        storeList:[]
      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
      this.dataInfo();
      this.getSelect();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight - this.$refs.actionBtn.offsetHeight - this.$refs.page.offsetHeight - 55;
      })
    },
    methods: {
      handleSearch(){
          this.page = 1;
          this.dataInfo();
      },
      async dataInfo() {
        try {
          let data = this.addDateRange(this.searchForm, this.applyTime, 'applyTimeStart', 'applyTimeEnd');
          this.addDateRange(this.searchForm, this.auditTime, 'auditTimeStart', 'auditTimeEnd');
          this.loading = true;
          const result = await storePromotionList(data);
          if (result.code == 200) {
            this.total = result.total;
            this.dataList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      selectable: function(row, index){
          if(row.auditStatus == '1'){
            return true;
          }
      },
      getSelect(){
        this.getCategoryDetails({categoryKey:'member_level_category'}).then(res=>{ this.levelList = res.data; })
        this.getSelectList('store_status').then(res=>{ this.statusList = res.data; })
        this.getCategoryDetails({categoryKey:'stores_category'}).then(res=>{ this.categoryList = res.data; })
        storePromotionSotreList().then(res=>{ this.storeList = res.data; })
      },
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.categoryId,
          label: node.name,
          children: node.children
        };
      },
      /** 表格排序 **/
      handleTablechangeSort (val) {
          if(val.order){
            let sortArr = [];
            sortArr.push(val.prop);
            sortArr.push(val.order);
            this.searchForm.sort = sortArr.join(',');
          }else{
            this.searchForm.sort = '';
          }
          this.dataInfo();
      },
      resetQuery(){
        this.applyTime = [];
        this.auditTime = [];
        this.resetForm('searchForm');
        this.dataInfo();
      },
      /** 详情 **/
      handleDetail(row){
        this.statusRow = row;
        this.detailsVisible = true;
      },
      /** 新增门店 **/
      handleAdd(){
        this.goodStoreTitle = "新增门店推广";
        //this.statusRow = row;
        this.goodStore.applyCode = '';
        this.goodStore.applyId = '';
        this.goodStore.storeId = '';
        this.goodStore.promotionType = '';
        this.goodStore.bannerImage = '';
        this.editVisible = true;
      },
      /** 修改 **/
      handleEdit(row){
        this.goodStoreTitle = "修改门店推广";
        this.statusRow = row;
        this.goodStore.applyCode = row.applyCode;
        this.goodStore.applyId = row.applyId;
         this.goodStore.storeId =  row.storeId;
        this.goodStore.promotionType = row.promotionType;
        this.goodStore.bannerImage = row.bannerImage;
        this.editVisible = true;
      },
      /** 接收图片上传后在服务器的path		**/
      imageChange(path, name) {
      	this.goodStore[name] = path
      },
      /** 审核 **/
      handleAudit(row){
        if(row){
          this.userList = [];
          this.userList.push(row.name);
          this.user.applyId = row.applyId;
        }else{
          if(!this.multipleSelection.length){
            this.$modal.msgError("请先选中在批量审核");
            return;
          }else{
            this.userList = [];
            let arr = [];
            for(let i=0;i<this.multipleSelection.length;i++){
              this.userList.push(this.multipleSelection[i].name);
              arr.push(this.multipleSelection[i].applyId)
            }
            this.user.applyId = arr.join(',')
          }
        }
        this.auditVisible = true;
      },
      /** 修改好店推广 **/
      editPromotionSubmit(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            this.userLoading = true;
            let result;
            if(this.goodStore.storeId){
              result = await storePromotionAdd(this.goodStore);
            }else{
              result = await storePromotionUpdate(this.goodStore);
            }
            if (result.code == 200) {
              this.$message.success(result.msg);
              this.editVisible = false;
              this.dataInfo();
            } else {
              this.$message.error(result.msg);
            }
            this.userLoading = false;

          }
        })
      },
      /** 好店推广审核 **/
      promotionAuditSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.userLoading = true;
            storePromotionAudit(this.user).then((result) => {
              if (result.code == 200) {
                this.$message.success(result.msg);
                this.auditVisible = false;
                this.dataInfo();
              } else {
                this.$message.error(result.msg);
              }
              this.userLoading = false;
            });
          }
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    }
  }
</script>

<style scoped lang="scss">
  .el-table .el-dropdown-link{
      cursor: pointer;
      color: #61997A;
      margin-left: 5px;
  }
    .leftDialog{
      height:540px;
      overflow-y: auto;
    }
    .activeVerticalBox .activeItem{
      color:#61997A;
      cursor: pointer;
      margin: 0px;
      text-align: center;
      height:20px;
      line-height: 20px;
    }
    .activeVerticalBox .el-dropdown{
      display: flex;
      justify-content: center;
      color:#61997A;
      cursor: pointer;
    }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }
    .rateBox /deep/ .el-rate__icon{
      margin-right: 0px;
    }
    .rateBox>p{
      margin: 0px;
    }
    .rateBox>p> /deep/ .el-rate{
      height:25px;
      line-height:25px;
      display:flex;
    }
    .rateBox>p> /deep/ .el-rate .el-rate__item{
      display:flex;
      align-items: center;
    }
    .rateBox .rateText{
      width:60px;
    }
    .rateBox .content{
      display: flex;
    }
    .rateBox .el-tooltip{
          width: 100px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: inline-block;
    }
</style>
